<template>
  <div style="height: 342px;overflow-y: auto;overflow-x: hidden">
    <InnerPageTable ref="dataTable" :config="tableConfig">
      <div slot="table-bar">
        <RPButton optType="create" @click="add" />
        <RPButton optType="delete" @click="deleted()" />
      </div>
    </InnerPageTable>
  </div>
</template>
<script>
import locales from "./locales.js";
import SelectListDimension from "./SelectListDimension.vue";
import { dimensionListColumns } from "./columns.js";
import { queryAssignedListDimensionData, saveAssignedDimensionData } from "@/api/dimensionApi.js";
export default {
  name: "AssignListDimension",
  mixins: [locales],
  props: {
    roleId: {
      type: String,
      default() {
        return "";
      }
    },
    tenantCode: {
      type: String,
      default() {
        return "";
      }
    },
    dimensionId: {
      type: String,
      default() {
        return "";
      }
    },
    dimensionCode: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      selectedIds: [],
      ids: [],
      searchForm: {
        roleId: this.roleId,
        tenantCode: this.tenantCode,
        dimensionCode: this.dimensionCode,
        dimensionId: this.dimensionId,
        pageNum: 0,
        pageSize: 10
      },
      isRowChange: false
    };
  },
  computed: {
    tableConfig() {
      return { columnsFn: dimensionListColumns.bind(this), isPage: false };
    }
  },
  created: function() {
    this.init();
  },
  mounted() {
    this.$table = this.$refs["dataTable"];
  },
  methods: {
    init() {
      // $store.dispatch("QueryAssignedListDimensionData", this.searchForm)
      queryAssignedListDimensionData(this.searchForm).then(res => {
        this.$table.tableData = res.data;
      });
    },
    search(page) {
      this.$table.load(this.searchForm, page);
    },
    add() {
      new this.$pageModal(
        SelectListDimension,
        {
          props: {
            roleId: this.roleId,
            tenantCode: this.tenantCode,
            dimensionId: this.dimensionId,
            dimensionCode: this.dimensionCode
          }
        },
        data => {
          if (data && data.length > 0) {
            let assignedDatas = this.$table.tableData;
            let unassignedDatas = data.filter(item => {
              // 去掉重复数据
              for (let index = 0; index < assignedDatas.length; index++) {
                if (assignedDatas[index].dimensionDataId == item.id) {
                  return false;
                }
              }
              item.dimensionDataId = item.id;
              delete item.id;
              item.dimensionDataName = item.name;
              item.dimensionDataCode = item.code;
              item.dimensionCode = this.dimensionCode;
              item.roleId = this.roleId;
              return true;
            });
            if (unassignedDatas && unassignedDatas.length > 0) {
              this.isRowChange = true;
            }
            this.$table.tableData = this.$table.tableData.concat(unassignedDatas);
          }
        }
      );
    },
    deleted() {
      let selectedRows = this.$table.getSelectioned();
      if (selectedRows && selectedRows.length > 0) {
        this.isRowChange = true;
        this.removeRow(selectedRows);
        this.$table.clearSelected();
      } else {
        this.$message.error(this.$t("common.warning.selctElement"));
      }
    },
    removeRow(selectedRows) {
      selectedRows.forEach(item => {
        let allRows = this.$table.tableData;
        for (let index = 0; index < allRows.length; index++) {
          const row = allRows[index];
          if (item.id == row.id) {
            // 从列表删除选中行
            this.$table.tableData.splice(index, 1);
            continue;
          }
        }
      });
    },
    save() {
      // 保存已分配维度数据
      let selectioned = this.$table.tableData;
      // let assignedData = [];
      // selectioned.forEach(item => {
      //   assignedData.push({
      //     dimensionCode: this.dimensionCode,
      //     dimensionDataCode: item.code,
      //     dimensionDataId: item.id,
      //     dimensionDataName: item.name,
      //     roleId: this.roleId
      //   });
      // });

      let param = {
        roleId: this.roleId,
        dimensionCode: this.dimensionCode,
        roleDataRelVos: selectioned
      };

      // $store
      //   .dispatch("SaveAssignedDimensionData", param)
      saveAssignedDimensionData(param)
        .then(response => {
          this.isRowChange = false;
          this.$message.success({
            content: this.$t("module.dimension.warning.updateSuccessfully"),
            duration: 3
          });
        })
        .catch(response => {
          this.$message.error(response.msg);
        });
    },
    isChange() {
      return this.isRowChange;
    }
  },
  watch: {},
  directives: {}
};
</script>
